<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<sp-basic-view
    [showBackLink]="true"
    [padding]="false"
    [backLinkTarget]="['dashboard']"
>
    <div
        nav
        fxFlex="100"
        fxLayoutAlign="start center"
        fxLayout="row"
        class="pl-10"
    >
        <div
            fxLayout="row"
            fxFlex="100"
            *ngIf="editMode"
            fxLayoutAlign="start center"
        >
            <button
                mat-button
                mat-raised-button
                color="accent"
                (click)="updateDashboardAndCloseEditMode()"
                class="mr-10"
                data-cy="dashboard-save-edit-mode"
            >
                <i class="material-icons">save</i>
                <span>&nbsp;&nbsp;Save</span>
            </button>
            <button
                mat-button
                mat-raised-button
                class="mat-basic mr-10"
                (click)="discardChanges()"
            >
                <i class="material-icons">clear</i>
                <span>&nbsp;Discard</span>
            </button>
            <button
                mat-button
                mat-raised-button
                color="accent"
                (click)="addWidget()"
                [disabled]="!editMode"
                data-cy="dashboard-add-widget"
            >
                <i class="material-icons">add</i>
                <span> Add visualization</span>
            </button>
            <span fxFlex></span>
            <mat-slide-toggle color="accent" [(ngModel)]="headerVisible">
                Show widget controls
            </mat-slide-toggle>
        </div>
    </div>
    <div fxFlex="100" fxLayout="column">
        <sp-dashboard-grid
            [editMode]="editMode"
            [dashboard]="dashboard"
            [headerVisible]="headerVisible"
            [allMeasurements]="allMeasurements"
            (updateCallback)="updateAndQueueItemForDeletion($event)"
            (deleteCallback)="removeAndQueueItemForDeletion($event)"
            *ngIf="dashboard && allMeasurements"
            class="h-100 dashboard-grid"
        ></sp-dashboard-grid>
    </div>
</sp-basic-view>
